<%@ page import="com.bw.pojo.Goods" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Aaking-aline
  Date: 2022-04-07
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>信息展示页</title>
    <style>
        table {
            border-collapse: collapse;   /*边框合并需要给表格标签单独设置*/
        }
        table td{
            border: green 2px solid;
        }
        #user {
            text-align: right;
        }
    </style>

</head>
<body>
    <div id="user">当前登录用户是: <%=request.getSession().getAttribute("username")%></div>
    <center>
        <table>
            <tr>
                <td>全选/反选<input type="checkbox" id="selectAll"></td>
                <td>商品id</td>
                <td>商品名称</td>
                <td>商品类目</td>
                <td>商品单价</td>
                <td>商品库存</td>
                <td>商品产地</td>
                <td>商品生产日期</td>
                <td>商品保质期</td>
                <td>操作</td>
            </tr>

            <%  // jsp中数据来源不能是 dao层直接查询
                // 从用户域中获取
                List<Goods> list = (List<Goods>) request.getAttribute("goods");

                if(list == null){
                    response.sendRedirect("SelectAllGoodsServlet");
                    return ;
                }

                for(Goods goods : list) { %>
                    <tr>
                        <td><input type="checkbox" class="deleteCheckBox" name="<%=goods.getId()%>"></td>
                        <td><%=goods.getId()%></td>
                        <td><%=goods.getGoods_name()%></td>
                        <td><%=goods.getGoods_kind()%></td>
                        <td><%=goods.getGoods_price()%></td>
                        <td><%=goods.getGoods_stock()%></td>
                        <td><%=goods.getGoods_makeaddr()%></td>
                        <td><%=goods.getGoods_makedate()%></td>
                        <td><%=goods.getGoods_quality()%></td>
                        <td><input type="button" class="deletebtn" value="删除" name="<%=goods.getId()%>"></td>
                    </tr>
            <%  }  %>

        </table>

        <input type="button" value="增加新商品" id="btn">
        <input type="button" value="批量删除" id="deleteAllBtn">
    </center>
</body>

    <script>
        // -----------------------------------------新增商品功能按钮
        document.getElementById("btn").onclick = function(){
            // 这个跳转其实跟a标签原理一样  就是改浏览器地址栏
            window.location.href = "insertGoods.jsp";
        }

        // -----------------------------------------下面是单删功能
        let arr = document.getElementsByClassName("deletebtn");

        for(let i = 0;i < arr.length; i++){
            arr[i].onclick = function(){
                let b = confirm("确认删除吗");
                if(b){
                    window.location.href = "DeleteGoodsServlet?id=" + this.name;
                }
            }
        }

        //-------------------------------------------下面是多选删除功能
        // ---------------全选/反选
        document.getElementById("selectAll").onclick = function(){
            let arr = document.getElementsByClassName("deleteCheckBox");
            for(let i = 0;i < arr.length;i++){
                arr[i].checked = this.checked;
            }
        }

        // ---------------批量删除
        document.getElementById("deleteAllBtn").onclick = function(){
            // 这个空串是用来拼接发送到后台的id串的
            let str = "";
            let arr = document.getElementsByClassName("deleteCheckBox");

            for(let i = 0;i < arr.length;i++){
                if(arr[i].checked){
                    str = str + arr[i].name + ",";
                }
            }  // 1,3,5,

            // 字符串为什么在这个位置要切割一下  是因为要去掉最后一个 ,
            str = str.slice(0,str.length-1);  // 1,3,5,    1,3,5

            let b = confirm("确认删除吗");
            if(b){
                window.location.href = "DeleteGoodsServlet?id=" + str;  // ?id=1,3,5
            }
        }
    </script>
</html>
